<template>
  <div class="mainAd">
    <img height="100%" width="100%" :src="data.imgSrc"/>
    <el-progress style="position: absolute;top: 10px;right: 20px" type="circle" :percentage="percentage"></el-progress>
  </div>
</template>

<script>
export default {
  name: "Advertisement",
  data: function () {
    return {
      percentage: 0,
      data: {}
    }
  },
  mounted() {
    this.getAdvertisementRandomly()
    let that = this
    let interval = setInterval(function () {
      that.percentage = that.percentage + 1
    }, 40);
    window.setTimeout(function () {
      clearInterval(interval)
      that.$router.push("/login")
    }, 4000)
  },
  methods: {
    async getAdvertisementRandomly() {
      await this.$http.get("/ad/getAdvertisementRandomly").then(async data => {
        // //console.log(data)
        data = data.data
        await this.getimg(data.coverPath).then(res => {
          data.imgSrc = res
        })
        this.data = data
        // //console.log(data)
      })
    },
    getimg(id) {
      return new Promise(resolve => {
        this.$http({
          url: "/file/img/" + id,
          method: "get",
          responseType: "arraybuffer",
        }).then(res => {
          let bytes = new Uint8Array(res);
          let storeData = "";
          let len = bytes.byteLength;
          for (let i = 0; i < len; i++) {
            storeData += String.fromCharCode(bytes[i]);
          }
          let database = "data:image/png;base64," + window.btoa(storeData);
          resolve(database);
        });
      })
    },
  }
}
</script>

<style>
.mainAd {
  position: relative;
  height: 100vh;
  background: linear-gradient(
      270deg, rgba(142, 239, 252, .9), rgba(142, 197, 252, .6));
}

.el-progress-circle {
  width: 50px !important;
  height: 50px !important;
}
</style>